<template>
  <el-row :gutter="5">
    <el-col :span="6">
      <el-card class="top" shadow="hover" style="height: calc(100vh - 20px)">
        <template #header>
          <div class="card-header">
            <span>题库</span>
          </div>
        </template>
        <el-tree ref="treeRef" :data="treeData" :expand-on-click-node="false" :props="treeProps" default-expand-all highlight-current node-key="id" @node-click="handleNodeClick"/>
      </el-card>
    </el-col>
    <el-col :span="18">
      <el-card class="top" shadow="hover" style="height: calc(100vh - 20px)">
        <template #header>
          <div class="card-header">
            <span>操作</span>
          </div>
        </template>
        <template v-if="clickNode.type==='KEMU'">
          <el-row :gutter="40">
            <el-col :span="12">
              <el-card shadow="hover" style="text-align:center;height:80px;line-height:60px;font-size:16px;position: relative;margin:10px 0;background: var(--el-color-primary-dark-2);color: #fff" class="exam-tips">
                <el-button type="primary" circle style="position: absolute;transform: translate(0%, -50%);top: 50%;right: 15px;display: none"  @click="this.createExamTipsState.open = true;this.createExamTipsState.type = 'ATTENTION';this.createExamTipsState.basicCode = this.clickNode.code;"><i-ep-edit style="font-size: 12px;"/></el-button>
                <span style="font-weight: 700">答题须知</span>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card shadow="hover" style="text-align:center;height:80px;line-height:60px;font-size:16px;position: relative;margin:10px 0;background: var(--el-color-success-dark-2);color: #fff" class="exam-tips">
                <el-button type="primary" circle style="position: absolute;transform: translate(0%, -50%);top: 50%;right: 15px;display: none"  @click="this.createExamTipsState.open = true;this.createExamTipsState.type = 'REAL';this.createExamTipsState.basicCode = this.clickNode.code;"><i-ep-edit style="font-size: 12px;"/></el-button>
                <span style="font-weight: 700">真题示例</span>
              </el-card>
            </el-col>
          </el-row>
          <el-tabs v-model="questionType" style="margin-bottom: 15px;" type="border-card" @tab-change="tabChange" >
            <el-tab-pane label="单选题" name="DANXUAN">
              <el-button type="primary" style="position: fixed;top: 220px;z-index: 999" @click="this.createQuestionState.open = true;this.createQuestionState.id = null;this.createQuestionState.type = 'DANXUAN';this.createQuestionState.basicCode = this.clickNode.code;">新增题目</el-button>
              <div style="margin-bottom: 40px"></div>
              <el-card shadow="hover" v-for="(question,index) in questions" class="question-content" :key="'DANXUAN_'+index" style="position: relative;margin:10px 0">
                <el-button type="primary" circle style="position: absolute;right: 20px;bottom: 20px;display: none;z-index:10000"  @click="this.createQuestionState.open = true;this.createQuestionState.id = question.id;this.createQuestionState.type = 'DANXUAN';this.createQuestionState.basicCode = this.clickNode.code;"><i-ep-edit style="font-size: 12px;"/></el-button>
                <span style="float: left;margin-right: 5px;color: var(--el-color-info-dark-2)">第{{this.paging.pageSize*(this.paging.currentPage-1)+index+1}}题. </span><div v-html="question.question"/>
                <div v-for="(answer,index) in question.answers" :key="answer.id" style="margin-top: 10px">
                  <span :style="answer.rights && 'color: var(--el-color-primary);font-weight: bold'">{{String.fromCharCode(index+65)}}. <span v-html="answer.answer"/></span>
                </div>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="多选题题" name="DUOXUAN">
              <el-button type="primary" style="position: fixed;top: 220px;z-index: 999" @click="this.createQuestionState.open = true;this.createQuestionState.id = null;this.createQuestionState.type = 'DUOXUAN';this.createQuestionState.basicCode = this.clickNode.code;">新增题目</el-button>
              <div style="margin-bottom: 40px"></div>
              <el-card shadow="hover" v-for="(question,index) in questions" class="question-content" :key="'DUOXUAN'+index" style="position: relative;margin:10px 0">
                <el-button type="primary" circle style="position: absolute;right: 20px;bottom: 20px;display: none;z-index:10000"  @click="this.createQuestionState.open = true;this.createQuestionState.id = question.id;this.createQuestionState.type = 'DUOXUAN';this.createQuestionState.basicCode = this.clickNode.code;"><i-ep-edit style="font-size: 12px;"/></el-button>
                <span style="float: left;margin-right: 5px;color: var(--el-color-info-dark-2)">第{{this.paging.pageSize*(this.paging.currentPage-1)+index+1}}题. </span><div v-html="question.question"/>
                <div v-for="(answer,index) in question.answers" :key="answer.id" style="margin-top: 10px">
                  <span :style="answer.rights && 'color: var(--el-color-primary);font-weight: bold'">{{String.fromCharCode(index+65)}}. <span v-html="answer.answer"/></span>
                </div>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="填空题" name="TIANKONG">
              <el-button type="primary" style="position: fixed;top: 220px;z-index: 999" @click="this.createQuestionState.open = true;this.createQuestionState.id = null;this.createQuestionState.type = 'TIANKONG';this.createQuestionState.basicCode = this.clickNode.code;">新增题目</el-button>
              <div style="margin-bottom: 40px"></div>
              <el-card shadow="hover" v-for="(question,index) in questions" class="question-content" :key="'TIANKONG'+index" style="position: relative;margin:10px 0">
                <el-button type="primary" circle style="position: absolute;right: 20px;bottom: 20px;display: none;z-index:10000"  @click="this.createQuestionState.open = true;this.createQuestionState.id = question.id;this.createQuestionState.type = 'TIANKONG';this.createQuestionState.basicCode = this.clickNode.code;"><i-ep-edit style="font-size: 12px;"/></el-button>
                <span style="float: left;margin-right: 5px;color: var(--el-color-info-dark-2)">第{{this.paging.pageSize*(this.paging.currentPage-1)+index+1}}题. </span><div v-html="question.question"/>
                <div v-for="(answer,index) in question.answers" :key="answer.id" style="margin-top: 10px">
                  第{{index+1}}空. <span v-html="answer.answer"/>
                </div>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="名词解释题" name="MINGCIJIESHI">
              <el-button type="primary" style="position: fixed;top: 220px;z-index: 999" @click="this.createQuestionState.open = true;this.createQuestionState.id = null;this.createQuestionState.type = 'MINGCIJIESHI';this.createQuestionState.basicCode = this.clickNode.code;">新增题目</el-button>
              <div style="margin-bottom: 40px"></div>
              <el-card shadow="hover" v-for="(question,index) in questions" class="question-content" :key="'MINGCIJIESHI'+index" style="position: relative;margin:10px 0">
                <el-button type="primary" circle style="position: absolute;right: 20px;bottom: 20px;display: none;z-index:10000"  @click="this.createQuestionState.open = true;this.createQuestionState.id = question.id;this.createQuestionState.type = 'MINGCIJIESHI';this.createQuestionState.basicCode = this.clickNode.code;"><i-ep-edit style="font-size: 12px;"/></el-button>
                <span style="float: left;margin-right: 5px;color: var(--el-color-info-dark-2)">第{{this.paging.pageSize*(this.paging.currentPage-1)+index+1}}题. </span><div v-html="question.question"/>
                <template v-for="(answer,index) in question.answers" :key="answer.id" style="margin-top: 10px">
                  <span v-html="answer.answer"/>
                </template>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="论述题" name="LUNSHU">
              <el-button type="primary" style="position: fixed;top: 220px;z-index: 999" @click="this.createQuestionState.open = true;this.createQuestionState.id = null;this.createQuestionState.type = 'LUNSHU';this.createQuestionState.basicCode = this.clickNode.code;">新增题目</el-button>
              <div style="margin-bottom: 40px"></div>
              <el-card shadow="hover" v-for="(question,index) in questions" class="question-content" :key="'LUNSHU'+index" style="position: relative;margin:10px 0">
                <el-button type="primary" circle style="position: absolute;right: 20px;bottom: 20px;display: none;z-index:10000"  @click="this.createQuestionState.open = true;this.createQuestionState.id = question.id;this.createQuestionState.type = 'LUNSHU';this.createQuestionState.basicCode = this.clickNode.code;"><i-ep-edit style="font-size: 12px;"/></el-button>
                <span style="float: left;margin-right: 5px;color: var(--el-color-info-dark-2)">第{{this.paging.pageSize*(this.paging.currentPage-1)+index+1}}题. </span><div v-html="question.question"/>
                <template v-for="(answer,index) in question.answers" :key="answer.id" style="margin-top: 10px">
                  <span v-html="answer.answer"/>
                </template>
              </el-card>
            </el-tab-pane>
            <el-pagination :current-page="paging.currentPage" :default-page-size="20" :page-size="paging.pageSize" :page-sizes="[20, 50, 100]" :total="paging.totalRow" background layout="sizes, prev, pager, next" style="margin-top: 20px;margin-bottom: 20px;float: right" @size-change="sizeChange" @current-change="currentChange"/>
          </el-tabs>
        </template>
        <el-empty v-else description="无可操作的信息"/>
      </el-card>
    </el-col>
  </el-row>

  <create :state="createQuestionState" @updated="listQuestion"/>
  <create-tips :state="createExamTipsState"/>
</template>
<script>

import Create from "@/views/question/Create.vue";
import CreateTips from "@/views/question/CreateTips.vue";

export default {
  name: "List",
  components: {Create,CreateTips},
  data() {
    return {
      treeProps: {
        children: 'children',
        label: 'name',
      },
      treeData: [],
      createQuestionState: {open: false, id: null, basicCode: null, type: null},
      createExamTipsState: {open: false, id: null, type: null},
      clickNode: {},
      questions: [],
      paging: {currentPage: 1, pageSize: 20, totalRow: 0},
      questionType: 'DANXUAN',
    }
  },
  async created() {
    await this.listTree()
  },
  methods: {
    async listTree(event = {}) {
      this.treeData = await this.post('/basic/list-tree');
      if (event.del && this.clickNode.id === event.id) return this.clickNode = {}

      if (this.clickNode.id) {
        this.$nextTick(() => {
          this.$refs.treeRef.setCurrentKey(this.clickNode.id);
          this.clickNode = this.$refs.treeRef.getNode(this.clickNode.id).data
        });
      }
    },
    async listQuestion() {
      let data = await this.post('/question/list/' + this.paging.pageSize + '/' + this.paging.currentPage, {
        basicCode: this.clickNode.code,
        type: this.questionType
      });
      this.questions = data.data
      this.paging.totalRow = parseInt(data.totalRow)
    },
    async handleNodeClick(data) {
      this.clickNode = data
      if (this.clickNode.type !== 'KEMU') {
        this.paging = {currentPage: 1, pageSize: 20, totalRow: 0}
        this.questions = []
        return;
      }
      await this.listQuestion();
    },
    sizeChange(pageSize) {
      this.paging.pageSize = pageSize;
      this.listQuestion();
    },
    currentChange(currentPage) {
      this.paging.currentPage = currentPage;
      this.listQuestion();
    },
    tabChange() {
      this.paging = {currentPage: 1, pageSize: 20, totalRow: 0}
      this.listQuestion();
    },
  }
}
</script>

<style scoped>
a.op {
  font-size: 13px;
}
.card-header {
  height: 25px;
}
.question-content:hover button,.exam-tips:hover button {
  display: block !important;
}
:deep(.el-tab-pane) {
  height: calc(100vh - 300px);
  overflow-y: scroll;
}
</style>